<template>
	<view class="container">
		<!-- 状态栏 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<image src="/static/icons/back.png" mode="aspectFit" class="back-icon"></image>
			</view>
			<view class="nav-title">每日签到</view>
		</view>
		
		<!-- 签到卡片 -->
		<view class="signin-card">
			<view class="card-header">
				<text class="title">连续签到 {{continuousDays}} 天</text>
				<text class="subtitle">每日签到领取金币奖励</text>
			</view>
			
			<!-- 签到日历 -->
			<view class="calendar">
				<view 
					v-for="(day, index) in signInDays" 
					:key="index"
					:class="['day-item', day.signed ? 'signed' : '', day.today ? 'today' : '']"
				>
					<text class="day-text">第{{index + 1}}天</text>
					<text class="reward">{{day.reward}}金币</text>
					<view class="check-icon" v-if="day.signed">
						<uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
					</view>
				</view>
			</view>
			
			<!-- 签到按钮 -->
			<button 
				class="signin-btn" 
				:class="{ 'disabled': todaySigned }"
				@click="handleSignIn"
				:disabled="todaySigned"
			>
				{{ todaySigned ? '今日已签到' : '立即签到' }}
			</button>
		</view>
		
		<!-- 签到成功弹窗 -->
		<uni-popup ref="signInPopup" type="center" :mask-click="false">
			<view class="popup-content">
				<view class="popup-header">
					<image src="/static/icons/success.png" mode="aspectFit" class="success-icon"></image>
					<text class="popup-title">签到成功</text>
				</view>
				<view class="reward-info">
					<text class="reward-text">获得奖励</text>
					<text class="reward-amount">{{currentDayReward}}金币</text>
				</view>
				<button class="confirm-btn" @click="closePopup">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			continuousDays: 0,
			todaySigned: false,
			currentDayReward: 0,
			signInDays: [
				{ reward: 10, signed: false, today: false },
				{ reward: 20, signed: false, today: false },
				{ reward: 30, signed: false, today: false },
				{ reward: 40, signed: false, today: false },
				{ reward: 50, signed: false, today: false },
				{ reward: 60, signed: false, today: false },
				{ reward: 100, signed: false, today: false }
			]
		}
	},
	onLoad() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		this.initSignInData();
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		// 初始化签到数据
		initSignInData() {
			// TODO: 从服务器获取签到数据
			// 这里模拟已经签到3天的数据
			this.continuousDays = 3;
			for(let i = 0; i < this.continuousDays; i++) {
				this.signInDays[i].signed = true;
			}
			this.signInDays[this.continuousDays].today = true;
		},
		
		// 处理签到
		handleSignIn() {
			if(this.todaySigned) return;
			
			// TODO: 调用签到API
			uni.showLoading({
				title: '签到中'
			});
			
			setTimeout(() => {
				uni.hideLoading();
				
				// 更新签到状态
				this.todaySigned = true;
				this.continuousDays++;
				this.currentDayReward = this.signInDays[this.continuousDays - 1].reward;
				this.signInDays[this.continuousDays - 1].signed = true;
				
				if(this.continuousDays < 7) {
					this.signInDays[this.continuousDays].today = true;
				}
				
				// 显示签到成功弹窗
				this.$refs.signInPopup.open();
			}, 1000);
		},
		
		// 关闭弹窗
		closePopup() {
			this.$refs.signInPopup.close();
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f8f9fa;
}

.status-bar {
	background: linear-gradient(135deg, #ff6b6b, #ff8787);
}

.nav-bar {
	display: flex;
	align-items: center;
	height: 44px;
	background: linear-gradient(135deg, #ff6b6b, #ff8787);
	padding: 0 15px;
}

.nav-left {
	width: 40px;
	height: 100%;
	display: flex;
	align-items: center;
}

.back-icon {
	width: 20px;
	height: 20px;
	filter: brightness(0) invert(1);
}

.nav-title {
	flex: 1;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
}

.signin-card {
	margin: 20px;
	background-color: #ffffff;
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.card-header {
	text-align: center;
	margin-bottom: 30px;
	
	.title {
		font-size: 20px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 5px;
		display: block;
	}
	
	.subtitle {
		font-size: 14px;
		color: #666666;
	}
}

.calendar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 10px;
	margin-bottom: 30px;
	
	.day-item {
		aspect-ratio: 1;
		background-color: #f8f9fa;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		
		.day-text {
			font-size: 12px;
			color: #666666;
			margin-bottom: 5px;
		}
		
		.reward {
			font-size: 14px;
			color: #ff6b6b;
			font-weight: 500;
		}
		
		&.signed {
			background: linear-gradient(135deg, #ff6b6b, #ff8787);
			
			.day-text, .reward {
				color: #ffffff;
			}
		}
		
		&.today {
			border: 2px solid #ff6b6b;
		}
		
		.check-icon {
			position: absolute;
			right: -5px;
			top: -5px;
			width: 16px;
			height: 16px;
			background-color: #ffffff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.signin-btn {
	width: 100%;
	height: 44px;
	line-height: 44px;
	text-align: center;
	background: linear-gradient(135deg, #ff6b6b, #ff8787);
	color: #ffffff;
	border-radius: 22px;
	font-size: 16px;
	
	&.disabled {
		opacity: 0.5;
	}
	
	&:active {
		opacity: 0.9;
	}
}

.popup-content {
	width: 280px;
	background-color: #ffffff;
	border-radius: 16px;
	padding: 30px 20px;
	text-align: center;
}

.popup-header {
	margin-bottom: 20px;
	
	.success-icon {
		width: 60px;
		height: 60px;
		margin-bottom: 10px;
	}
	
	.popup-title {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
	}
}

.reward-info {
	margin-bottom: 30px;
	
	.reward-text {
		font-size: 14px;
		color: #666666;
		margin-bottom: 10px;
		display: block;
	}
	
	.reward-amount {
		font-size: 24px;
		font-weight: bold;
		color: #ff6b6b;
	}
}

.confirm-btn {
	width: 100%;
	height: 44px;
	line-height: 44px;
	background: linear-gradient(135deg, #ff6b6b, #ff8787);
	color: #ffffff;
	border-radius: 22px;
	font-size: 16px;
	
	&:active {
		opacity: 0.9;
	}
}
</style> 